<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { NIcon, NTooltip } from 'naive-ui'
import { Share24Regular } from '@vicons/fluent'
import { X, Check, ArrowsLeftRight } from '@vicons/tabler'
import { useRouter } from 'vue-router'

const router = useRouter()
const props = defineProps<{
  isShared: boolean
  title: string
}>()

const emit = defineEmits<{
  (e: 'update:isShared', value: boolean): void
  (e: 'showShareDialog'): void
}>()

const toggleShare = () => {
  emit('update:isShared', !props.isShared)
}
const goBuilder = () => {
  router.push(`/llm-studio/builder/${Number(router.currentRoute.value.params.id)}`)
}
</script>

<template>
  <div class="w-full justify-between flex px-5 py-2.5">
    <div class="flex items-center">
      <span class="text-lg font-medium">{{ props.title }}</span>
    </div>
    <div class="flex items-center gap-2">
      <NTooltip placement="bottom" v-if="!isShared">
        <template #trigger>
          <CustomButton bgColor="" @click="toggleShare">
            <template #icon>
              <n-icon size="20" :component="Share24Regular"></n-icon>
            </template>
          </CustomButton>
        </template>
        <span>分享对话</span>
      </NTooltip>
      <NTooltip placement="bottom" v-if="!isShared">
        <template #trigger>
          <CustomButton bgColor="" @click="goBuilder">
            <template #icon>
              <n-icon size="20" :component="ArrowsLeftRight"></n-icon>
            </template>
          </CustomButton>
        </template>
        <span>切换到专业模式</span>
      </NTooltip>
      <CustomButton bgColor="" v-if="isShared" @click="toggleShare">
        <template #icon>
          <n-icon size="20" :component="X"></n-icon>
        </template>
      </CustomButton>
      <CustomButton bgColor="" v-if="isShared" @click="$emit('showShareDialog')">
        <template #icon>
          <n-icon size="20" :component="Check"></n-icon>
        </template>
      </CustomButton>
    </div>
  </div>
</template>
